<template>
  <div id="service_detail">
    <ReturnPage />
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 服务模板配置 -->
      <el-tab-pane label="服务模板配置" name="first">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基础信息" name="1">
            <div class="content">
              <div class="info_item">
                模版名称： {{ serviceDetail.serviceTemplateName }}
              </div>
              <div class="info_item">
                服务分类： {{ serviceDetail.serviceCategoryName }}
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="服务进程" name="3">
            <div class="content">
              <el-button
                class="add"
                type="primary"
                size="mini"
                @click="addProcessVisible = true"
                >新建进程</el-button
              >
              <span style="margin-left: 10px; font-size: 12px; color: #8f9197"
                >模板中第一个进程默认为关键进程，服务实例化后的名称会包含此进程的基本信息</span
              >
              <el-table
                :data="processData"
                style="width: 100%; margin-top: 10px"
                max-height="500px"
              >
                <el-table-column
                  prop="serviceProcessName"
                  label="进程名称"
                ></el-table-column>
                <el-table-column
                  prop="serviceProcessAlias"
                  label="进程别名"
                ></el-table-column>
                <el-table-column
                  prop="serviceProcessParameter"
                  label="进程启动参数"
                >
                </el-table-column>
                <el-table-column prop="serviceProcessBinding" label="绑定信息">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      style="margin-right: 10px"
                      type="primary"
                      @click="showEdit(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="delProcess(scope.row.serviceProcessId)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>

        <!-- <el-button type="primary" class="mt20">编辑</el-button> -->
      </el-tab-pane>

      <!-- 服务模板实例 -->
      <el-tab-pane
        label="服务列表"
        name="second"
        style="
          background-color: #ffffff;
          padding-bottom: 30px;
          box-sizing: border-box;
          padding: 20px;
          border-radius: 5px;
        "
      >
        <el-row class="mb20" style="width: 100%">
          <el-col :span="2">
            <el-button
              type="primary"
              size="mini"
              :disabled="!multipleSelection.length"
              @click="batchSynchronization"
            >
              批量同步
            </el-button>
          </el-col>
          <el-col :span="4" :offset="18">
            <el-input
              size="mini"
              v-model="query.servicePath"
              placeholder="请输入拓扑路径"
              suffix-icon="el-icon-search"
              clearable
              @keyup.enter.native="getServiceList"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          height="calc(100vh - 370px)"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column type="selection"> </el-table-column>
          <el-table-column label="模块名称" prop="serviceName">
          </el-table-column>
          <el-table-column
            label="业务拓扑路径"
            show-overflow-tooltip="ture"
            prop="servicePath"
          >
          </el-table-column>
          <el-table-column label="状态" prop="isSynchronize">
            <template slot-scope="scope">
              {{ scope.row.isSynchronize ? "已同步" : "待同步" }}
            </template>
          </el-table-column>

          <el-table-column label="创建时间" prop="addTime"> </el-table-column>
          <el-table-column label="上次同步日期" prop="isSynchronizeTime">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                style="margin-right: 10px"
                @click="handleSynchronization(scope.row.serviceId)"
                >同步</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.serviceId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          :select-data-len="multipleSelection.length"
          @pagination="getServiceList()"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 新建进程弹窗 -->
    <el-dialog title="新建进程" :visible.sync="addProcessVisible">
      <el-form
        ref="addProcessForm"
        :model="addProcessForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="进程名称" prop="serviceProcessName">
          <el-input
            v-model="addProcessForm.serviceProcessName"
            placeholder="请输入进程名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程别名" prop="serviceProcessAlias">
          <el-input
            v-model="addProcessForm.serviceProcessAlias"
            placeholder="请输入进程别名"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程启动参数" prop="serviceProcessParameter">
          <el-input
            v-model="addProcessForm.serviceProcessParameter"
            placeholder="请输入进程启动参数"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程绑定信息" prop="serviceProcessParameter">
          <el-input
            v-model="addProcessForm.serviceProcessBinding"
            placeholder="请输入进程绑定信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          @click="addProcess('addProcessForm')"
          >确定</el-button
        >
        <el-button @click="addProcessVisible = false" size="mini"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑进程弹窗 -->
    <el-dialog title="编辑进程" :visible.sync="editProcessVisible">
      <el-form
        ref="editProcessForm"
        :model="editProcessForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="进程名称" prop="serviceProcessName">
          <el-input
            v-model="editProcessForm.serviceProcessName"
            placeholder="请输入进程名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程别名" prop="serviceProcessAlias">
          <el-input
            v-model="editProcessForm.serviceProcessAlias"
            placeholder="请输入进程别名"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程启动参数" prop="serviceProcessParameter">
          <el-input
            v-model="editProcessForm.serviceProcessParameter"
            placeholder="请输入进程启动参数"
          ></el-input>
        </el-form-item>
        <el-form-item label="进程绑定信息" prop="serviceProcessParameter">
          <el-input
            v-model="editProcessForm.serviceProcessBinding"
            placeholder="请输入进程信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          @click="editProcess('editProcessForm')"
          >确定</el-button
        >
        <el-button @click="editProcessVisible = false" size="mini"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getListByServiceId_Api, //根据服务模板id查询服务列表
  syncServiceTemplate_Api, //服务模板同步
  getProcessListByServiceId_Api, //根据服务模版查进程列表
  addProcess_Api, //新建进程
  delProcess_Api, //删除进程
  editProcess_Api, //编辑进程
  delService_Api, //删除服务实例
  getServiceDetail_Api, //根据服务模版id查询服务模板详情
} from "@/api/configuration/business";
import {
  getCurrent_YMDHMS_Time, //获取当前年月日时分秒
} from "@/utils/common.js";
import {
  clearObj, //清空表单的值的方法
} from "@/utils/index.js";

export default {
  data() {
    return {
      search: "",
      // 数据条数
      total: 20,
      //分页数据
      query: {
        pageNum: 1,
        pageSize: 10,
        servicePath: "", //拓扑路径
        serviceTemplateId: "", //服务模版id
      },
      //多选
      multipleSelection: [],
      //服务模版实例列表
      tableData: [],
      //服务进程列表
      processData: [],
      addProcessVisible: false, //控制新建进程显示隐藏
      editProcessVisible: false, //控制新建进程显示隐藏
      //新建进程表单
      addProcessForm: {
        serviceProcessName: "", //进程名称
        serviceProcessAlias: "", //进程别名
        serviceProcessParameter: "", //进程启动参数
        serviceProcessBinding: "", //进程绑定信息
        serviceTemplateId: "", //服务模版id
      },
      //编辑进程表单
      editProcessForm: {
        serviceProcessName: "", //进程名称
        serviceProcessAlias: "", //进程别名
        serviceProcessParameter: "", //进程启动参数
        serviceProcessBinding: "", //进程绑定信息
        serviceTemplateId: "", //服务模版id
      },
      activeName: "first", //选中的tab
      activeNames: ["1", "2", "3"], //服务模版配置展开的模块
      serviceDetail: {}, //服务模版详情
    };
  },
  created() {
    this.getServiceList(); //根据服务模板id查询服务列表
    this.getProcessList(); //根据服务模版查进程列表
    this.getServiceDetail(); //根据服务模版id查询服务模板详情
  },
  methods: {
    //根据服务模板id查询服务列表
    getServiceList() {
      this.query.serviceTemplateId = this.$route.query.serviceId;
      getListByServiceId_Api(this.query).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    //根据服务模版查进程列表
    getProcessList() {
      getProcessListByServiceId_Api({}, this.$route.query.serviceId).then(
        (res) => {
          this.processData = res.rows;
        }
      );
    },
    //根据服务模版id查询服务模板详情
    getServiceDetail() {
      getServiceDetail_Api(this.$route.query.serviceId).then((res) => {
        this.serviceDetail = res.data;
      });
    },
    //新建进程
    addProcess() {
      this.addProcessForm.serviceTemplateId = this.$route.query.serviceId;
      addProcess_Api(this.addProcessForm)
        .then((res) => {
          this.$message.success(res.msg);
          this.getProcessList();
          this.addProcessVisible = false;
          this.addProcessForm = clearObj(this.addProcessForm);
        })
        .catch((error) => {});
    },
    //编辑进程
    editProcess() {
      this.editProcessForm.serviceTemplateId = this.$route.query.serviceId;
      editProcess_Api(this.editProcessForm)
        .then((res) => {
          this.$message.success(res.msg);
          this.editProcessVisible = false;
          this.getProcessList();
        })
        .catch((error) => {});
    },
    //显示编辑进程弹框
    showEdit(data) {
      this.editProcessVisible = true;
      this.editProcessForm = { ...data };
    },
    //删除进程
    delProcess(id) {
      this.$confirm("是否确认删除该进程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delProcess_Api(id)
            .then((res) => {
              this.$message.success(res.msg);
              this.getProcessList();
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //同步
    handleSynchronization(id) {
      syncServiceTemplate_Api(id).then((res) => {
        this.$message.success(res.msg);
        this.getServiceList();
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.serviceId);
    },
    //删除服务模版实例
    handleDelete(id) {
      this.$confirm("是否确认删除该服务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delService_Api(id).then((res) => {
            this.$message.success(res.msg);
            this.getServiceList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量同步
    batchSynchronization() {
      syncServiceTemplate_Api(this.multipleSelection.join(",")).then((res) => {
        this.$message.success(res.msg);
        this.getServiceList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#service_detail ::v-deep .el-tabs {
  box-sizing: border-box;
  padding: 10px;
}
::v-deep .el-tabs__content {
  padding-bottom: 10px;
}
::v-deep .el-tabs .el-tab-pane .el-collapse .el-collapse-item {
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  .el-collapse-item__header {
    border: none;
    padding-left: 10px;
    font-weight: 550;
  }
  .content {
    width: 80%;
    margin: 0 auto;
    .info_item {
      margin-top: 10px;
    }
  }
}
</style>
